// DOM元素加载完成后执行
document.addEventListener('DOMContentLoaded', function() {
    // 导航菜单交互
    const hamburger = document.querySelector('.hamburger');
    const navLinks = document.querySelector('.nav-links');
    const navItems = document.querySelectorAll('.nav-links li');
    
    // 语言切换功能
    const langButtons = document.querySelectorAll('.lang-btn');
    langButtons.forEach(button => {
        button.addEventListener('click', function() {
            const lang = this.getAttribute('data-lang');
            // 调用language.js中的updateLanguage函数切换语言
            updateLanguage(lang);
        });
    });

    // 汉堡菜单点击事件
    hamburger.addEventListener('click', function() {
        // 切换导航菜单显示/隐藏
        navLinks.classList.toggle('active');
        // 切换汉堡菜单图标动画
        hamburger.classList.toggle('active');
    });

    // 点击导航链接后关闭菜单（移动端）
    navItems.forEach(item => {
        item.addEventListener('click', function() {
            navLinks.classList.remove('active');
            hamburger.classList.remove('active');
        });
    });

    // 平滑滚动
    document.querySelectorAll('a[href^="#"]').forEach(anchor => {
        anchor.addEventListener('click', function(e) {
            e.preventDefault();
            
            const targetId = this.getAttribute('href');
            const targetElement = document.querySelector(targetId);
            
            if (targetElement) {
                window.scrollTo({
                    top: targetElement.offsetTop - 70, // 考虑导航栏高度
                    behavior: 'smooth'
                });
            }
        });
    });

    // 联系表单处理
    const contactForm = document.getElementById('contactForm');
    
    if (contactForm) {
        // 表单输入验证函数
        function validateInput(inputElement, errorKey) {
            const value = inputElement.value.trim();
            const formGroup = inputElement.parentElement;
            
            // 移除之前的错误提示
            const existingError = formGroup.querySelector('.error-message');
            if (existingError) {
                formGroup.removeChild(existingError);
            }
            
            // 从translations对象获取错误消息
            const errorMessage = translations[currentLang] && translations[currentLang][errorKey] ? 
                translations[currentLang][errorKey] : errorKey;
            
            if (!value) {
                inputElement.classList.add('error');
                const errorElement = document.createElement('div');
                errorElement.className = 'error-message';
                errorElement.textContent = errorMessage;
                formGroup.appendChild(errorElement);
                return false;
            } else {
                inputElement.classList.remove('error');
                return true;
            }
        }
        
        // 表单输入框实时验证
        const nameInput = document.getElementById('name');
        const emailInput = document.getElementById('email');
        const messageInput = document.getElementById('message');
        
        nameInput.addEventListener('blur', function() {
            validateInput(this, 'form.error.name');
        });
        
        emailInput.addEventListener('blur', function() {
            validateInput(this, 'form.error.email');
        });
        
        messageInput.addEventListener('blur', function() {
            validateInput(this, 'form.error.message');
        });
        
        // 表单提交事件处理
        contactForm.addEventListener('submit', function(e) {
            e.preventDefault();
            
            // 验证所有输入字段
            const isNameValid = validateInput(nameInput, 'form.error.name');
            const isEmailValid = validateInput(emailInput, 'form.error.email');
            const isMessageValid = validateInput(messageInput, 'form.error.message');
            
            // 如果表单验证通过
            if (isNameValid && isEmailValid && isMessageValid) {
                // 模拟表单提交
                console.log('Form submitted successfully!', {
                    name: nameInput.value,
                    email: emailInput.value,
                    message: messageInput.value
                });
                
                // 从translations对象获取成功消息
                const successText = translations[currentLang] && translations[currentLang]['form.success'] ? 
                    translations[currentLang]['form.success'] : '消息已发送，感谢您的联系！';
                
                // 创建并显示成功提示消息
                const successMessage = document.createElement('div');
                successMessage.className = 'success-message';
                successMessage.textContent = successText;
                
                // 插入到表单之前
                contactForm.parentNode.insertBefore(successMessage, contactForm);
                
                // 重置表单
                contactForm.reset();
                
                // 3秒后隐藏成功消息
                setTimeout(function() {
                    successMessage.classList.add('fade-out');
                    setTimeout(function() {
                        if (successMessage.parentNode) {
                            successMessage.parentNode.removeChild(successMessage);
                        }
                    }, 500);
                }, 3000);
            }
        });
    }

    // 滚动时导航栏样式变化
    window.addEventListener('scroll', function() {
        const header = document.querySelector('header');
        
        if (window.scrollY > 50) {
            header.style.backgroundColor = 'rgba(51, 51, 51, 0.9)';
            header.style.boxShadow = '0 2px 10px rgba(0, 0, 0, 0.1)';
        } else {
            header.style.backgroundColor = 'rgba(51, 51, 51, 1)';
            header.style.boxShadow = 'none';
        }
    });

    // 项目卡片动画
    const projectItems = document.querySelectorAll('.project-item');
    
    function checkProjectVisibility() {
        projectItems.forEach(item => {
            const itemTop = item.getBoundingClientRect().top;
            const windowHeight = window.innerHeight;
            
            if (itemTop < windowHeight - 100) {
                item.style.opacity = '1';
                item.style.transform = 'translateY(0)';
            }
        });
    }
    
    // 设置初始样式
    projectItems.forEach(item => {
        item.style.opacity = '0';
        item.style.transform = 'translateY(20px)';
        item.style.transition = 'opacity 0.5s ease, transform 0.5s ease';
    });
    
    // 初始检查
    checkProjectVisibility();
    
    // 滚动时检查
    window.addEventListener('scroll', checkProjectVisibility);

    // 返回顶部按钮
    const backToTopButton = document.createElement('button');
    // 使用图标而不是文本，避免多语言问题
    backToTopButton.innerHTML = '↑';
    backToTopButton.classList.add('back-to-top');
    backToTopButton.setAttribute('aria-label', translations[currentLang] && translations[currentLang]['backToTop'] ? 
        translations[currentLang]['backToTop'] : '返回顶部');
    document.body.appendChild(backToTopButton);
    
    // 初始隐藏
    backToTopButton.style.display = 'none';
    
    // 滚动时显示/隐藏返回顶部按钮
    window.addEventListener('scroll', function() {
        if (window.scrollY > 300) {
            backToTopButton.style.display = 'block';
        } else {
            backToTopButton.style.display = 'none';
        }
    });
    
    // 返回顶部功能
    backToTopButton.addEventListener('click', function() {
        window.scrollTo({
            top: 0,
            behavior: 'smooth'
        });
    });

    // 添加返回顶部按钮样式
    const style = document.createElement('style');
    style.textContent = `
        .back-to-top {
            position: fixed;
            bottom: 30px;
            right: 30px;
            width: 50px;
            height: 50px;
            background-color: #00aaff;
            color: white;
            border: none;
            border-radius: 50%;
            font-size: 1.5rem;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
            transition: background-color 0.3s ease, transform 0.3s ease;
            z-index: 99;
        }
        
        .back-to-top:hover {
            background-color: #0088cc;
            transform: translateY(-3px);
        }
        
        @media screen and (max-width: 768px) {
            .back-to-top {
                bottom: 20px;
                right: 20px;
                width: 40px;
                height: 40px;
                font-size: 1.2rem;
            }
        }
    `;
    document.head.appendChild(style);
});